<template>
  <div class="loading" v-if="visible">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Loading",
    data(){
      return {
        visible: false
      };
    }
  }
</script>

<style scoped>
  .loading{
    width: 100%;
    height: 100%;
    font-size: 1rem;
    color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 999;
  }
  ul{
    height: 200px;
    display: flex;
  }
  li{
    margin-left: 20px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: red;
  }
  li:nth-child(1){
    background: red;
    animation: love1 4s 0s infinite;
  }
  li:nth-child(2){
    background: darkturquoise;
    animation: love2 4s 0.2s infinite;
  }
  li:nth-child(3){
    background: darksalmon;
    animation: love3 4s 0.4s infinite;
  }
  li:nth-child(4){
    background: deeppink;
    animation: love4 4s 0.6s infinite;
  }
  li:nth-child(5){
    background: yellow;
    animation: love5 4s 0.8s infinite;
  }
  li:nth-child(6){
    background: deeppink;
    animation: love4 4s 1s infinite;
  }
  li:nth-child(7){
    background: darksalmon;
    animation: love3 4s 1.2s infinite;
  }
  li:nth-child(8){
    background: darkturquoise;
    animation: love2 4s 1.4s infinite;
  }
  li:nth-child(9){
    background: red;
    animation: love1 4s 1.6s infinite;
  }

  @keyframes love1{
    30%,50%{
      height: 60px;
      transform: translateY(-30px);
    }
    70%,100%{
      height: 0;
      transform: translateY(0);
    }
  }
  @keyframes love2{
    30%,50%{
      height: 125px;
      transform: translateY(-60px);
    }
    70%,100%{
      height: 0;
      transform: translateY(0);
    }
  }
  @keyframes love3{
    30%,50%{
      height: 160px;
      transform: translateY(-75px);
    }
    70%,100%{
      height: 0;
      transform: translateY(0);
    }
  }
  @keyframes love4{
    30%,50%{
      height: 180px;
      transform: translateY(-60px);
    }
    70%,100%{
      height: 0;
      transform: translateY(0);
    }
  }
  @keyframes love5{
    30%,50%{
      height: 200px;
      transform: translateY(-45px);
    }
    70%,100%{
      height: 0;
      transform: translateY(0);
    }
  }
</style>